<template>
  <div
    v-if="visible"
    class="ku-gou-menu"
    ref="keGouMenuDom"
    :style="{ left: `${position[0]}px`, top: `${position[1]}px` }"
  >
    <ul>
      <li @click.stop="handleCloseKuGou">退出</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { useRunningTasksStore } from '@/stores/taskBar/runningTasks'
import { useClickBlankHidden } from '@/hooks'
import type { PropType } from 'vue'

export default defineComponent({
  name: 'keGouTrayMenu',
  props: {
    modelValue: {
      type: Boolean as PropType<boolean>,
      required: true
    },
    position: {
      type: Array as PropType<number[]>,
      required: true,
      default: () => [0, 0]
    },
    appId: {
      type: String as PropType<string>,
      required: true
    },
    taskId: {
      type: String as PropType<string>,
      required: true
    }
  },
  emits: ['update:modelValue'],
  setup(props, ctx) {
    const runningTasksStore = useRunningTasksStore()
    const keGouMenuDom = ref<HTMLElement>()
    const visible = ref<boolean>(props.modelValue)

    const handleCloseKuGou = () => {
      runningTasksStore.closeTask(props.appId, props.taskId)
      ctx.emit('update:modelValue', false)
    }

    useClickBlankHidden(
      () => keGouMenuDom.value,
      () => {
        visible.value = false
        ctx.emit('update:modelValue', false)
      }
    )

    watch(
      () => props.modelValue,
      (val: boolean) => {
        visible.value = val
      }
    )

    return {
      visible,
      keGouMenuDom,
      handleCloseKuGou
    }
  }
})
</script>

<style scoped lang="scss">
@import '@/assets/scss/common';

.ku-gou-menu {
  width: 160px;
  position: fixed;
  z-index: $z-index-task-bar;
  background-color: #fff;
  color: #000;
  border-radius: 8px;
  padding: 10px 0;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  transform: translateY(-100%);

  ul {
    li {
      padding-left: 40px;
      height: 30px;
      line-height: 30px;

      &:hover {
        color: rgb(47, 174, 230);
        background-color: #eee;
      }
    }
  }
}
</style>
